<!-- 账号设置 -->
<template>
  <div class="container">
    <div class="controlBox">
      <el-button type="primary" size="mini" @click="addAccount"
        >新增账号</el-button
      >
      <el-button type="primary" size="mini">恢复账号</el-button>
      <el-button type="primary" size="mini">停用账号</el-button>
    </div>
    <!-- 新增账号  弹框 -->
    <el-dialog title="" :visible.sync="showAddPopup" width="40%" center>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="机构名称" prop="organizationName">
          <el-input v-model="form.organizationName" />
        </el-form-item>
        <el-form-item label="账号ID" prop="accountNumber">
          <el-input v-model="form.accountNumber" />
        </el-form-item>
        <el-form-item label="账号有效期" prop="expireTime">
          <el-date-picker
            v-model="form.expireTime"
            type="date"
            placeholder="请选择账号有效期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="linkman">
          <el-input v-model="form.linkman" />
        </el-form-item>
        <el-form-item label="联系电话" prop="linkmanPhone">
          <el-input v-model="form.linkmanPhone" />
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="form.passWord" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">新增账号</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog title="" :visible.sync="showRedactPopup" width="40%" center>
      <el-form
        ref="redactForm"
        :model="amendForm"
        :rules="rules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="机构名称" prop="organizationName">
          <el-input v-model="amendForm.organizationName" />
        </el-form-item>
        <el-form-item label="账号ID" prop="accountNumber">
          <el-input v-model="amendForm.accountNumber" />
        </el-form-item>
        <el-form-item label="账号有效期" prop="expireTime">
          <el-date-picker
            v-model="amendForm.expireTime"
            type="date"
            placeholder="请选择账号有效期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="linkman">
          <el-input v-model="amendForm.linkman" />
        </el-form-item>
        <el-form-item label="联系电话" prop="linkmanPhone">
          <el-input v-model="amendForm.linkmanPhone" />
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="amendForm.passWord" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAmendForm('redactForm')">提交</el-button>
      </span>
    </el-dialog>

    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      height="750"
      :data="tableData"
      :header-cell-style="{ background: '#efefef' }"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="organizationName" label="机构名称" />
      <el-table-column prop="accountNumber" label="账号ID" />
      <el-table-column prop="expireTime" label="账号有效期" />
      <el-table-column prop="linkman" label="联系人" />
      <el-table-column prop="linkmanPhone" label="联系电话" />
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >恢复</el-button
          >
          <el-button
            type="text"
            style="color: #f56c6c"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="controlBox"
      style="margin-top:20px"
      background 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]" 
      :page-size="pagesize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">    
    </el-pagination>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showAddPopup: false,
      showRedactPopup:false,
      currentPage:1,  //  初始页
      pagesize:10,    //  每页的数据
      form: {
        organizationName: "",
        expireTime: "",
        linkman: "",
        linkmanPhone: "",
        accountNumber: "",
        passWord: "",
      },
      amendForm:{
        organizationName: "",
        expireTime: "",
        linkman: "",
        linkmanPhone: "",
        accountNumber: "",
        passWord: "",
      },
      amendFormIndex:'',
      tableData: [
        {
          organizationName: "ws234",
          expireTime: "2020-2-22",
          linkman: "萧蔷",
          linkmanPhone: "1352463157",
          accountNumber: "10333s",
        },
        {
          organizationName: "ws234",
          expireTime: "2020-2-22",
          linkman: "萧蔷",
          linkmanPhone: "1352463157",
          accountNumber: "10333s",
        }
      ],
      rules: {
        organizationName: [
          {
            required: true,
            message: "请填写机构名称",
            trigger: "blur",
          },
        ],
        accountNumber: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            required: true,
            pattern: "^[0-9]{2}$",
            message: "请输入正确的账号，账号位2位数字",
            trigger: "blur",
          },
        ],
        linkman: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" },
        ],
        linkmanPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            required: true,
            pattern: "^1[3456789]\\d{9}$",
            message: "请输入正确的联系电话",
            trigger: "blur",
          },
        ],
        purpose: [
          { required: true, message: "请输入账号用途", trigger: "blur" },
        ],
        expireTime: [
          {
            // type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        passWord: [
          { required: true, message: "请输密码", trigger: "blur" },
          {
            required: true,
            pattern: "^[A-Za-z0-9]{6,8}$",
            message: "密码为6~8位数字和字母",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    addAccount() {
      this.showAddPopup = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message('submit!')
        } else {
          this.$message('error submit!!')
          return false
        }
      })
    },
    submitAmendForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tableData[this.amendFormIndex] = this.amendForm ;
          this.$message('submit!')
          this.showRedactPopup = false;
        } else {
          this.$message('error submit!!')
          return false
        }
      })
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
    },
    handleEdit(index, row) {
      this.showRedactPopup = true;
      this.amendForm = row;
      this.amendFormIndex = index;
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
};
</script>
<style lang='scss' scoped>
.container {
  padding: 20px;
  .controlBox {
    padding-bottom: 16px;
  }
}
</style>
